<template>
  <div
    class="menu-item"
    :class="{ active: $route.path === item.path }"
    v-for="item in routes"
    :key="item.path"
    @click="$router.push(item.path)"
  >
    {{ item.name }}
  </div>
</template>

<script setup lang="ts">
import { routes } from '@/router'
</script>

<style scoped lang="scss">
.menu-item {
  padding: 5px 10px 5px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 5px;

  &:hover {
    color: #fff;
    background-color: $main-color;
  }
}

.active {
  color: #fff;
  background-color: $main-color;
}
</style>
